<script type="text/javascript">
  let replay_template = {
    subscribe: {
      text: $('#replay-template-text').html(),
      image: $('#replay-template-image').html(),
      voice: $('#replay-template-voice').html(),
      video: $('#replay-template-video').html(),
    },
    keyword: {
      container: $('#replay-keyword-template').html(),
      message: $('#replay-keyword-message-template').html(),
      text: `<div class="layui-form mt5" data-index="{index}">
    <div class="layui-input-group" style="width: 100%">
        <div class="layui-input-prefix layui-input-split">
            {{ __('wechat.event_replay_message_text') }}
        </div>
        <textarea data-message="text" name="text" class="layui-textarea">{value}</textarea>
    </div>
    <div class="text-right">
        {action}
    </div>
</div>`,
      image: `<div class="layui-form mt5" data-index="{index}">
     <div class="layui-input-group" style="width: 100%">
        <div class="layui-input-prefix layui-input-split">
            {{ __('wechat.event_replay_message_image') }}
        </div>
        <input data-message="image" name="image" value="{value}" class="layui-input" placeholder="输入框">
     </div>
     <div class="text-right">
        {action}
     </div>
</div>`,
      voice: `<div class="layui-form mt5" data-index="{index}">
    <div class="layui-input-group" style="width: 100%">
        <div class="layui-input-prefix layui-input-split">
            {{ __('wechat.event_replay_message_voice') }}
        </div>
        <input data-message="voice" name="voice" value="{value}" class="layui-input" placeholder="输入框">
    </div>
    <div class="text-right">
       {action}
    </div>
</div>`,
      video: `<div class="layui-form mt5" data-index="{index}">
    <div class="layui-input-group" style="width: 100%">
        <div class="layui-input-prefix layui-input-split">
            {{ __('wechat.event_replay_message_video') }}
        </div>
        <input data-message="video" name="video" value="{value}" class="layui-input" placeholder="输入框">
    </div>
    <div class="text-right">
       {action}
    </div>
</div>`,
    },
    action: {
      up: `<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-action="up">
                                    <i class="layui-icon layui-icon-up" ></i>
                                </button>`,
      down: ` <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-action="down">
                                    <i class="layui-icon layui-icon-down" ></i>
                                </button>`,
      delete: ` <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-action="delete">
                                    <i class="layui-icon layui-icon-delete" ></i>
                                </button>`,
    }
  }

  /**
   * 关注回复
   * @param type
   * @param value
   */
  const appendSubscribeAction = function (type, value) {
    value = value || ''
    let container = $('#replay-container')
    let template = replay_template.subscribe[type]
    let len = container.find('.layui-form-item').length
    if (len < 3) {
      if (value) {
        value = value.replace(/\n/g, '\\n')
      }
      let action = replay_template.action.up + replay_template.action.down + replay_template.action.delete
      template = template.replace('{action}', action)
      template = template.replace('{index}', len)
      template = template.replace('{value}', value)
      container.append(template)
    }
  }

  /**
   * 增加关键字回复容器
   * @param value
   * @param message_value
   */
  const appendKeywordContainer = function (value, message_value) {
    value = value || ''
    let container = $('#keyword-container')
    let template = replay_template.keyword.container
    let len = container.find('.layui-form-item').length
    if (value) {
      value = value.replace(/\n/g, '\\n')
    }
    template = template.replace('{value}', value)
    template = template.replace('{index}', len + 1)

    if (message_value) {
      let message = ''
      for (let i in message_value) {
        let data = message_value[i]
        message += appendKeywordMessage(data.type, data.content)
      }
      template = template.replace('{message}', message)
    } else {
      let text = appendKeywordMessage('text')
      text = text.replaceAll('{index}', 0)
      template = template.replace('{message}', text)
    }

    container.append(template)
  }

  /**
   * 关键字回复消息类型添加
   * @param type
   * @param value
   */
  const appendKeywordMessage = function (type, value) {
    value = value || ''
    let template = replay_template.keyword[type]
    if (value) {
      value = value.replace(/\n/g, '\\n')
    }
    let action = replay_template.action.up + replay_template.action.down + replay_template.action.delete
    template = template.replace('{action}', action)
    template = template.replace('{value}', value)
    return template
  }

  /**
   *
   * 关注消息回填
   * @param replay
   */
  const eventSubscribeInit = function (replay) {
    if (replay) {
      for (let i in replay) {
        let data = replay[i]
        appendSubscribeAction(data['type'], data['content'])
      }
    }
  }

  $(function () {

    /**
     * =========关注公众号开始==========
     */
    eventSubscribeInit(event_subscribe.replay || null)
    $('#replay_message_type button').on('click', function () {
      let type = $(this).data('message')
      appendSubscribeAction(type, '')
    })

    $('#replay-container').on('click', '.layui-form-item button', function () {

      let action = $(this).data('action')
      let index = $(this).parents('[data-index]').data('index')

      // 当前元素
      let current = $(this).parents('.layui-form-item')
      let current_html = current.prop('outerHTML')

      // 前一个元素
      let prev = current.parent('div').prev('div').find('.layui-form-item')
      let prev_html = prev.prop('outerHTML')
      let prev_index = index - 1

      // 后一个元素
      let next = current.parent('div').next('div').find('.layui-form-item')
      let next_html = next.prop('outerHTML')
      let next_index = index + 1

      let div = $('#replay-container>div')

      if (action === 'up' && index > 0) {
        div.eq(index).html(prev_html)
        div.eq(prev_index).html(current_html)
      } else if (action === 'down') {
        div.eq(next_index).html(current_html)
        div.eq(index).html(next_html)
      } else {
        current.parent('div').remove()
      }
    })

    /**
     * =========关注公众号结束==========
     */

    /**
     * =========关键字开始==========
     */

    // 添加关键字

    $('#add-keyword-replay-btn').on('click', function () {
      appendKeywordContainer()
    })

    let keyword_replay = keyword_setting.replay || []
    if (keyword_replay.length > 0) {
      for (let i in keyword_replay) {
        let data = keyword_replay[i]
        appendKeywordContainer(data['keyword'], data['message'])
      }
    } else {
      appendKeywordContainer()
    }

    // 添加关键字回复
    $('#keyword-container').on('click', '[data-message]', function () {

      let type = $(this).data('message')
      let template = appendKeywordMessage(type)

      let item = $(this).siblings('.message-item:eq(0)')
      let len = item.find('.layui-form').length
      if (len < 5) {
        template = template.replaceAll('{index}', len)
        item.append(template)
      }
    })

    // 关键字回复排序
    $('#keyword-container').on('click', '.message-item button', function () {

      let action = $(this).data('action')
      // 当前元素
      let current = $(this).parents('[data-index]')

      if (action === 'delete') {
        current.remove()
        return false
      }

      let index = current.data('index')
      let current_html = current.html()

      // 前一个元素
      let prev = current.prev('[data-index]')
      let prev_html = prev.html()
      let prev_index = prev.data('index')

      // 后一个元素
      let next = current.next('[data-index]')
      let next_html = next.html()
      let next_index = next.data('index')

      let div = $(this).parents('.message-item')

      if (action === 'up' && index > 0) {
        div.find('[data-index=' + prev_index + ']').html(current_html)
        div.find('[data-index=' + index + ']').html(prev_html)
      } else if (action === 'down') {
        div.find('[data-index=' + next_index + ']').html(current_html)
        div.find('[data-index=' + index + ']').html(next_html)
      }
    })
    /**
     * =========关键字结束==========
     */
  })

</script>